<!--单行文本、文本域、密码框、颜色-->
<template>
  <!--颜色-->
  <el-color-picker
    v-if="meta.controlType === EControlType.color"
    v-model="value"
    v-bind="$attrs"
  >
  </el-color-picker>
  <!--密码-->
  <el-input
    v-else-if="meta.controlType === EControlType.password"
    v-model="value"
    v-bind="$attrs"
    :id="'c' + meta.columnId"
    :name="'c' + meta.columnId"
    :clearable="clearable"
    show-password
  >
  </el-input>
  <!--单行文本、多行文本、email、tel、search-->
  <el-input
    v-else
    v-model="value"
    v-bind="$attrs"
    :type="EControlType[meta.controlType]"
    :id="'c' + meta.columnId"
    :name="'c' + meta.columnId"
    :clearable="clearable"
    :prefix-icon="prefixIcon"
    :suffix-icon="suffixIcon"
    @blur="run"
    @change="run"
    @clear="run"
    @keydown="clear"
  >
  </el-input>
</template>
 
<script setup lang="ts" generic="T extends object">
  import type { IFormChildProps } from '../map'
  import { itemController, EControlType } from '../map'

  defineOptions({
    name: 'nf-el-form-item-input',
    inheritAttrs: false,
  })
  //:prefix-icon="($icon)?$icon[prefixIcon]:''"
  // :suffix-icon="($icon)?$icon[suffixIcon]:''"
  
  // 定义 props
  // const props = defineProps<IFormItemProps<T>>()
  
  // 必填的，还必须设置默认值，那这个默认值，有啥用？
  // 好吧，不是这里要求，是下面的函数要求。
  const props = withDefaults(defineProps<IFormChildProps<T> & {
    prefixIcon?: string,
    suffixIcon?: string
  }>(), {
    meta: () => {
      return {
        colName: '',
        controlType: EControlType.text
      }
    },
    model: () => {
      return {} as T
    },
    clearable: true,
    prefixIcon: '',
    suffixIcon: ''
  })

  // 支持防抖等功能
  const {
    value,
    run,
    clear
  } = itemController(props)
 
</script>
